<template>
  <section v-loading="Loading">
    <!-- 工具栏 -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="condition">
        <el-form-item>
          <el-date-picker
            v-model="condition.time"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select v-model="condition.type" placeholder="类型" @change="resetPage">
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-input v-model="condition.jobNumber" placeholder="工号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!-- 操作栏位 -->
    <el-col>
      <el-form :inline="true">
        <el-form-item>
          <el-button type="success" @click="newFormVisible = true" size="small">新增</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="success" @click="outExcel" size="small">导出EXCEL</el-button>
        </el-form-item>-->
      </el-form>
    </el-col>

    <!-- 数据展示 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column align="center" type="selection" fixed width="50"></el-table-column>
      <el-table-column align="center" label="序号" fixed type="index" width="50"></el-table-column>
      <el-table-column align="center" label="姓名" prop="name" fixed min-width="100"></el-table-column>
      <el-table-column align="center" label="工号" prop="jobNumber" min-width="100"></el-table-column>
      <el-table-column align="center" label="部门" prop="department" min-width="100"></el-table-column>
      <el-table-column align="center" label="开始时间" prop="beginTime" min-width="100"></el-table-column>
      <el-table-column align="center" label="结束时间" prop="endTime" min-width="100"></el-table-column>
      <el-table-column align="center" label="总天数" prop="total" min-width="50"></el-table-column>
      <el-table-column align="center" label="申请原因" prop="reason" min-width="150"></el-table-column>
      <el-table-column align="center" label="备注" prop="remark" min-width="150"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentChange"
        :current-page="currentPage"
        :total="totalPage"
        style="float:right;"
      ></el-pagination>
    </el-col>

    <!-- 新建 -->
    <el-dialog title="新增" :visible.sync="newFormVisible" :close-on-click-modal="false">
      <el-form label-width="6rem" ref="newForm" :model="newData" :rules="rules">
        <el-form-item label="类型" prop="type">
          <el-select v-model="newData.type" placeholder="类型">
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="newData.name" placeholder="姓名" @blur="nameBlur(newData.name)"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="sfz">
          <el-select
            v-model="newData.sfz"
            placeholder="请选择"
            :disabled="sfzDisabled"
            @change="sfzChange(newData.sfz)"
          >
            <el-option
              v-for="item in sfz"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工号" prop="jobNumber">
          <el-input v-model="newData.jobNumber" @blur="getPerson" disabled></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="newData.department" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="申请日期" prop="time">
          <el-date-picker
            v-model="newData.time"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="申请原因">
          <el-input v-model="newData.reason" type="textarea" autosize placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="newData.remark" type="textarea" autosize placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="newFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="newSubmit" :loading="newLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { getFreeCost, getPersonInfo, newFree } from "../../api/cost.js";
import { bedInfo } from "../../api/inOut.js";
export default {
  data() {
    return {
      condition: {
        time: [],
        name: null,
        jobNumber: null,
        type: "",
        page: 1,
        _time: []
      },
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      type: [
        {
          label: "免扣",
          value: "1"
        },
        {
          label: "销假",
          value: "2"
        }
      ],
      tableData: [
        {
          name: null,
          jobNumber: null,
          department: null,
          beginTime: null,
          endTime: null,
          total: null,
          reason: null,
          remark: null
        }
      ],
      newData: {
        type: null,
        jobNumber: "",
        name: "",
        _name: "",
        department: "",
        time: [],
        reason: null,
        remark: null,
        _time: [],
        sfz: null
      },
      rules: {
        type: [
          { required: true, message: "请选择新增类型", trigger: "changhe" }
        ],
        jobNumber: [
          {
            type: "string",
            required: true,
            message: "请输入工号",
            trigger: "blur"
          }
        ],
        name: [
          {
            type: "string",
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }
        ],
        sfz: [
          {
            type: "string",
            required: true,
            message: "请选择身份证",
            trigger: "blur"
          }
        ],
        // name: [{ required: true, message: "请输入工号", trigger: "blur" }]
        time: {
          type: "array",
          required: true,
          message: "请选择日期范围",
          trigger: "change"
        }
      },
      currentPage: 1,
      totalPage: 1,
      newFormVisible: false,
      name: null,
      newLoading: false,
      Loading: false,
      sfzDisabled: true,
      sfz: [],
      searchResult: null
    };
  },
  methods: {
    // 取数
    getData() {
      // 时间先进行格式化
      // this.condition.time.forEach((element, index, input) => {
      //   if (element !== null) {
      //     input[index] = parseInt(element.getTime()) / 1000;
      //   }
      // });
      // console.log(this.condition.time);
      // 未选择类型不进行查询
      if (!this.condition.type) {
        return false;
      }

      // 修改数组的值推荐使用map

      this.condition._time = this.condition.time.map(
        (element, index, input) => {
          return parseInt(element.getTime()) / 1000;
        }
      );

      this.Loading = true;
      getFreeCost(this.condition).then(res => {
        this.Loading = false;
        if (res) {
          this.totalPage = res.page;
          this.tableData = res.msg;
        } else {
          this.tableData = null;
          this.totalPage = 0;
          this.currentPage = 0;
        }
      });
    },
    // 查询
    search() {
      // 查询
      // 时间处理
      this.getData();
    },
    // 分页
    currentChange(val) {
      this.condition.page = val === undefined ? this.currentPage : val;
      this.getData();
    },
    // 新增
    newSubmit() {
      // this.newLoading = true;
      this.$refs["newForm"].validate(valid => {
        if (valid) {
          // 新增
          this.newData._time = this.newData.time.map(
            (element, index, input) => {
              return parseInt(element.getTime()) / 1000;
            }
          );
          newFree(this.newData).then(res => {
            if (res) {
              this.$alert(res.msg, "系统提示", {
                cancelButtonText: "确定",
                callback: action => {
                  this.newData = {
                    type: null,
                    jobNumber: "",
                    name: "",
                    department: "",
                    time: [],
                    reason: null,
                    remark: null,
                    _time: []
                  };
                }
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    // TODO: 导出
    outExcel() {},
    // 类型发生变化时重置page
    resetPage() {
      this.condition.page = 1;
    },
    // 获取人员信息
    getPerson() {
      if (this.newData.jobNumber === "") {
        this.newData.name = "";
        this.newData.department = "";
        return false;
      }
      this.Loading = true;
      getPersonInfo(this.newData.jobNumber).then(res => {
        this.Loading = false;
        if (res) {
          // 填充姓名部门
          this.newData.name = res.msg.name;
          this.newData.department = res.msg.department;
        } else {
          // 填充姓名部门
          this.newData.name = res.msg.name;
          this.newData.department = res.msg.department;
          this.$$message.warning("暂无此人信息!");
        }
      });
    },
    nameBlur(name) {
      // 不为空
      if (name === null || name === "") {
        // this.resettingSubmit("outRoom");
        this.$message.error("姓名不得为空");
        return false;
      }

      // 工号未发生变化时不触发操作
      if (this.newData._name === this.newData.name) {
        return false;
      }
      this.newData._name = this.newData.name;

      bedInfo(name).then(res => {
        if (res) {
          // this.outData.jobNumber = null;
          let result = res.msg;
          /**
           *  返回记录若只有1条,进行填充
           *  若返回记录有多条，则进行选择
           */
          this.sfz = [];
          if (result.length === 1) {
            // 单条记录直接进行填充
            this.sfzDisabled = true;
            this.newData = Object.assign(this.newData, result[0][0]);
          } else if (result.length > 1) {
            // 多条记录需要进行下拉框选择
            this.searchResult = result;
            for (let i = 0; i < result.length; i++) {
              let _sfz = { value: i, label: result[i][0].sfz };
              this.sfz.push(_sfz);
            }
            this.sfzDisabled = false;
          }
        } else {
          // this.resettingSubmit("outRoom");
        }
      });
    },
    sfzChange(sfz) {
      this.newData = Object.assign(this.newData, this.searchResult[sfz][0]);
    }
  },
  mounted() {}
};
</script>
<style>
</style>
